import Taro, { Component } from "@tarojs/taro";
import {
  AtSwipeAction,
  AtCheckbox,
  AtIcon,
 
} from "taro-ui";
import { View } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import {onShowAddWorkModal,onGetWorks} from '../../actions/workToDo'
import { serverDomain, port } from "../../config/config";
import "./workToDo.less";

@connect(
  state => state,
  {onShowAddWorkModal,onGetWorks}
)
class WorkToDo extends Component {

  componentDidMount(){
    this.props.onGetWorks(this.props.user.openid);
  }

   handleChange(value,finished) {
    Taro.showToast({
      title: finished?"正在取消":"正在完成",
      icon: "loading",
      mask: true
    }).then(() => {
      Taro.request({
        url: `${serverDomain}:${port}/work/changeWorkStatus`,
        method: "POST",
        data: {
          timeStamp: value,
          user:this.props.user.openid
        },
        success: res => {
          if (res.data.code == 0) {
            this.props.onGetWorks(this.props.user.openid,()=>{
              Taro.atMessage({
                message: finished?(this.props.user.specialWords.length===0?"取消完成":this.props.user.specialWords[6][1]):(this.props.user.specialWords.length===0?"任务完成":this.props.user.specialWords[6][0]),
                type: "info",
                duration:3000
              });
            })
          } else {
            Taro.atMessage({
              message: "服务器出错",
              type: "error",
              duration:3000
            });
          }
        },
        fail: () => {
          Taro.atMessage({
            message: "服务器出错",
            type: "error",
            duration:3000
          });
        },
        complete: Taro.hideToast
      });
    });
  }

  handleSwipeClick=(id)=>{
    Taro.showToast({
      title:'正在删除事项',
      icon:'loading',
      mask:true
  }).then(()=>{
    Taro.request({
      url: `${serverDomain}:${port}/work/deleteWork`,
      method: "POST",
      data: {id},
      success:(res)=>{
        if(res.data.code==0)
        {
          this.props.onGetWorks(this.props.user.openid,()=>{
            Taro.atMessage({
              message: "成功删除事项",
              type: "info",
              duration:3000
            });
          });
        }
        else{
          Taro.atMessage({
            message: "服务器出错",
            type: "error",
            duration:3000
          });
        }
      },
      fail:()=>{
        Taro.atMessage({
          message: "服务器出错",
          type: "error",
          duration:3000
        });
      },
      complete:Taro.hideToast
    })
  })
  }

  render() {
    let works=this.props.workToDo.works
    return (
      <View className='work-todo'>
          {
            works.length!==0?
            works.map((v, i) => {
            return (
              <AtSwipeAction
                key={i}
                onClick={() => {
                  this.handleSwipeClick(v._id);
                }}
                options={[
                  {
                    text: "删除",
                    style: {
                      backgroundColor: "#FF4949"
                    }
                  }
                ]}
              >
                <AtCheckbox
                  options={
                    [{
                      value:v.timeStamp,
                      label:v.workName,
                      desc:v.workDetails
                    }]
                    }
                  selectedList={
                    works.filter((selectV)=>{
                      if(selectV.timeStamp===v.timeStamp)
                      return selectV.finished
                      return false
                    }).map((finishedWork)=>{
                      return finishedWork.timeStamp
                    })
                  }
                  onChange={() => {
                    this.handleChange.bind(this)(v.timeStamp,v.finished);
                  }}
                />
              </AtSwipeAction>
        )}) : (
          <View className='no-plan'>无任务</View>
        )}
        <AtIcon
          className='add-work-button'
          value='add-circle'
          size={60}
          color='#90B1EF'
          onClick={()=>{
            this.props.onShowAddWorkModal();
          }}
        />
      </View>
    );
  }
}

export default WorkToDo;
